<template>
    <div class="auditBox">
        <div class="info" :class="{big: result&&result.type == 3}">
            <div class="name clearfix">
                <div class="nameList">
                    <em class="patients" v-if="result.type == 1">患者</em>
                    <em class="family" v-if="result.type == 2">陪同家属</em>
                    <em class="staff" v-if="result.type == 3">本院人员</em>
                </div>
                <span>{{result.name}}</span>
            </div>
            <ul>
                <li>
                    <div>手机号：</div>
                    <div>{{result.phone}}</div>
                </li>
                <li>
                    <div>身份证号：</div>
                    <div>
                        {{result.cardId}}
                    </div>
                </li>
                <li>
                    <div>住址：</div>
                    <div>{{result.address}}</div>
                </li>
                <!--                    <li v-if="result.type==1">-->
                <!--                        <div>预约科室：</div>-->
                <!--                        <div>{{result.expertsAppointment.dept}} {{result.expertsAppointment.doctorName}}</div>-->
                <!--                    </li>-->
                <!--                    <li v-if="result.type==1">-->
                <!--                        <div>预约时间：</div>-->
                <!--                        <div>{{result.expertsAppointment.appointmentDate}} {{result.expertsAppointment.dayStr}}-->
                <!--                            {{result.expertsAppointment.visitTime}}-->
                <!--                        </div>-->
                <!--                    </li>-->

                <li @click="jump('register')" v-if="result.type&&result.type == 1" class="accompany">
                    <div>预约记录</div>
                    <div class="num">
                        <span>{{result.expertsAppointmentList&&result.expertsAppointmentList.length}}</span><i
                        class="el-icon-arrow-right"></i>
                    </div>
                </li>
                <li @click="jump('accompany')" v-if="result.type&&result.type != 3" class="accompany">
                    <div v-if="result.type == 1">陪同家属</div>
                    <div v-if="result.type == 2">陪同患者</div>
                    <div class="num"><span>{{result.familyMember&&result.familyMember.length}}</span><i
                        class="el-icon-arrow-right"></i>
                    </div>
                </li>
            </ul>
        </div>
        <swiper :dots-position="'center'" class="swiper" :height="'4rem'" v-if="result.idCardImg[0]">
            <swiper-item class="black" v-for="(list,index) in result.idCardImg" :key="index">
                <el-image
                    fit="contain"
                    :src="'/_api' + list"
                    class="uploadimg"
                    @load="loadImage()"
                    preview>
                    <div slot="placeholder" class="image-slot">
                        <i class="el-icon-loading"></i>
                    </div>
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
            </swiper-item>
        </swiper>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1.5rem" :show-message="false"
                 :label-position="'top'" class="form clearfix">
            <!--                <div class="title">登记信息</div>-->
            <el-form-item label="出入状态" prop="state">
                <checker v-model="ruleForm.state" default-item-class="ckecker-item"
                         selected-item-class="active">
                    <checker-item :value="item" v-for="(item, index) in stateList" :key="index">
                        <!--                            {{item.value}}-->
                        <template v-if="item.value=='进'">
                            <el-image src="../../static/images/intUn.png" fit="contain"
                                      v-show="ruleForm.state.key!=item.key"></el-image>
                            <el-image src="../../static/images/intC.png" fit="contain"
                                      v-show="ruleForm.state.key==item.key"></el-image>
                        </template>
                        <template v-else>
                            <el-image src="../../static/images/outUn.png" fit="contain"
                                      v-show="ruleForm.state.key!=item.key"></el-image>
                            <el-image src="../../static/images/outC.png" fit="contain"
                                      v-show="ruleForm.state.key==item.key"></el-image>
                        </template>
                    </checker-item>
                </checker>
            </el-form-item>
            <el-form-item label="体温状况" prop="temperature">
                <checker v-model="ruleForm.temperature" default-item-class="ckecker-item"
                         selected-item-class="active">
                    <checker-item :value="item" v-for="(item, index) in temperatureList" :key="index">
                        <!--                            {{item.value}}-->
                        <template v-if="item.value=='正常'">
                            <el-image src="../../static/images/nomalUn.png" fit="contain"
                                      v-show="ruleForm.temperature.key!=item.key"></el-image>
                            <el-image src="../../static/images/nomalC.png" fit="contain"
                                      v-show="ruleForm.temperature.key==item.key"></el-image>
                        </template>
                        <template v-else>
                            <el-image src="../../static/images/hotUn.png" fit="contain"
                                      v-show="ruleForm.temperature.key!=item.key"></el-image>
                            <el-image src="../../static/images/hotC.png" fit="contain"
                                      v-show="ruleForm.temperature.key==item.key"></el-image>
                        </template>
                    </checker-item>
                </checker>
            </el-form-item>
            <el-form-item label="温度(℃)" prop="degree" class="degree">
                <div @click="degreeShow"><span v-if="!ruleForm.degree[0]" class="placeholder">请选择</span><span>{{ruleForm.degree[0]}}</span><i
                    class="el-icon-arrow-right"></i></div>
                <div></div>
                <popup-picker title="" :data="[degreeData]" v-model="ruleForm.degree"
                              :placeholder="'请选择'" :show.sync="showPopupPicker" v-show="false"></popup-picker>
            </el-form-item>
            <group>

            </group>
        </el-form>
        <el-button type="primary" @click="submitForm()" class="submit">登记</el-button>
        <router-view :idCardImg="result.idCardImg" @update="update"></router-view>
        <!--        <alert v-model="result.appointmentToday" class="appointment" v-if="result&&result.appointmentToday">-->
        <!--            <div>该用户预约的不是今天</div>-->
        <!--            <div>他预约的时间是：</div>-->
        <!--            <div>{{result.appointmentTime || ''}}</div>-->
        <!--        </alert>-->
    </div>
</template>

<script>
    import {Group, Checklist, Selector, PopupPicker, Alert, Swiper, SwiperItem, Checker, CheckerItem} from 'vux'

    export default {
        data() {
            return {
                result: {
                    name: '',
                    idType: '',
                    cardId: '',
                    idCardImg: [],
                    phone: '',
                    address: '',
                    type: '',
                    degree: '',
                    familyMember: [], // 患者/家属
                    expertsAppointmentList: [], // 预约记录
                    appointmentTime: '',
                    appointmentToday: false,
                    expertsAppointment: null, // 预约科室信息
                    recordCount: 0 // 扫码记录次数
                },
                degreeData: [
                    '35', '35.1', '35.2', '35.3', '35.4', '35.5', '35.6', '35.7', '35.8', '35.9',
                    '36', '36.1', '36.2', '36.3', '36.4', '36.5', '36.6', '36.7', '36.8', '36.9',
                    '37', '37.1', '37.2', '37.3', '37.4', '37.5', '37.6', '37.7', '37.8', '37.9',
                    '38', '38.1', '38.2', '38.3', '38.4', '38.5', '38.6', '38.7', '38.8', '38.9',
                    '39', '39.1', '39.2', '39.3', '39.4', '39.5', '39.6', '39.7', '39.8', '39.9', '40'],
                temperature: [],
                tk: '',
                ruleForm: {
                    state: '',
                    temperature: '',
                    degree: []
                },
                rules: {
                    state: [
                        {required: true, message: '请选择出入状态', trigger: 'change'}
                    ],
                    temperature: [
                        {required: true, message: '请选择体温状况', trigger: 'change'}
                    ],
                    degree: [
                        {required: true, message: '请选择温度', trigger: 'change'}
                    ]
                },
                stateList: [
                    {key: '1', value: '进'},
                    {key: '2', value: '出'}
                ],
                temperatureList: [
                    {key: '1', value: '正常'},
                    {key: '2', value: '发热'}
                ],
                showPopupPicker: false,
                previewState: false,
                previewBox: null
            }
        },
        mounted() {
            let _this = this
            if (this.$route.query.qrresult) {
                this.tk = this.$route.query.qrresult
                this.init()
            }
            /* 监听图片查看器 */
            this.$preview.on('imageLoadComplete', (e, item) => {
                    _this.previewState = true
                    let _preview = this.$preview.self
                    this.previewBox = _preview
                    _preview.listen('close', () => {
                        _this.previewState = false
                    })
                }
            )
        },
        methods: {
            init() {
                this.$vux.loading.show()
                this.$http.post('/recorder/recordInfo?tk=' + this.tk).then(result => {
                    if (result.success && result.data) {
                        this.result = {
                            name: result.data.name,
                            idType: '身份证',
                            cardId: result.data.cardId,
                            idCardImg: result.data.idCardImg,
                            phone: result.data.phone,
                            address: result.data.addrLocal,
                            type: result.data.type,
                            recordCount: result.data.recordCount,
                            familyMember: result.data.familyMember,
                            appointmentTime: result.data.appointmentTime,
                            expertsAppointment: result.data.expertsAppointment,
                            expertsAppointmentList: result.data.expertsAppointmentList
                            // appointmentToday: !result.data.appointmentToday
                        }
                        this.$vux.loading.hide()
                    }
                })
            },
            update() {
                if ((this.$route.query.qrresult || this.$route.query.tk) && !this.result.phone) {
                    this.tk = this.$route.query.qrresult || this.$route.query.tk
                    this.init()
                }
            },
            accompany() {
                this.$router.push({
                    path: this.$route.path + '/accompany',
                    query: {
                        tk: this.tk,
                        type: this.result.type
                    }
                })
            },
            jump(path) {
                this.$router.push({
                    path: this.$route.path + '/' + path,
                    query: {
                        tk: this.tk,
                        type: this.result.type
                    }
                })
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        this.$vux.toast.text('请完善登记信息', 'middle')
                        return false
                    }
                })
            },
            submitForm(formName) {
                this.validate('ruleForm', () => {
                    this.$http.post('/recorder/takeRecord?tk=' + this.tk, {
                        action: this.ruleForm.state.key, // 进出
                        healthStatus: this.ruleForm.temperature.key, // 健康状态
                        remark: this.ruleForm.degree[0],
                        recordAddr: '', // 记录地点
                        strategy: 1 // 执行策略
                    }).then(result => {
                        if (result.success) {
                            this.$vux.alert.show({
                                content: '登记成功',
                                onShow() {
                                },
                                onHide() {
                                    history.back()
                                }
                            })
                        }
                    })
                })
            },
            lookCardId() {
                // this.$router.push('/sweepCodeCheck/lookCardId?qrresult=' + this.tk)
                this.$router.push({
                    path: '/sweepCodeCheck/lookCardId',
                    query: {
                        qrresult: this.tk
                    }
                })
            },
            loadImage() {
                this.$nextTick(() => {
                    this.$previewRefresh()
                })
            },
            degreeShow() {
                let degreeData = this.degreeData
                this.temperature = degreeData.filter(e => {
                    if (this.ruleForm.temperature.key === '1') {
                        return Number(e) <= 37.3
                    } else {
                        return Number(e) > 37.3
                    }
                })
                this.showPopupPicker = true
            }
        },
        components: {
            Group,
            Checklist,
            Selector,
            PopupPicker,
            Alert,
            Swiper,
            SwiperItem,
            Checker,
            CheckerItem
        },
        beforeRouteLeave(to, from, next) {
            let _this = this
            if (_this.previewState) {
                _this.previewBox.close()
                next(false)
            } else {
                next()
            }
        }
    }
</script>

<style scoped lang="less">
    .auditBox {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #fff;
        padding-bottom: .9rem;

        .info {
            background-color: #4078ff;
            padding-top: .5rem;

            .name {
                font-size: .36rem;
                line-height: .48rem;
                text-align: center;
                margin-bottom: .5rem;
                position: relative;
                color: #fff;

                .nameList {
                    position: absolute;
                    top: 0;
                    right: .4rem;

                    em {
                        color: #fff;
                        border-radius: .2rem;
                        font-size: .24rem;
                        display: inline-block;
                        vertical-align: top;
                        padding: 0 .25rem;
                        line-height: .4rem;
                        height: .4rem;
                        margin-top: .04rem;
                    }

                    .patients {
                        background-color: #FF6464;
                    }

                    .family {
                        background-color: #FFC565;
                    }

                    .staff {
                        background-color: #658CFF;
                    }
                }
            }

            li {
                color: #fff;
                min-height: .6rem;
                line-height: .48rem;
                padding: 0 .2rem 0 .3rem;
                margin-bottom: .1rem;

                div {
                    text-align: left;
                    overflow: hidden;

                    &:nth-child(1) {
                        float: left;
                        width: 1.6rem;
                    }

                    &:nth-child(2) {
                        position: relative;
                        margin-left: 1.6rem;
                    }
                }

                &.accompany {
                    height: .76rem;
                    line-height: .76rem;
                    background-color: #598aff;
                    margin-bottom: 0;
                    border-bottom: 1px solid #4078ff;

                    .num {
                        text-align: right;

                        i {
                            display: inline-block;
                            margin-left: .05rem;
                        }
                    }
                }

                &:last-child {
                    border-bottom: 0 none;
                }
            }

            &.big {
                padding-bottom: .2rem;
            }
        }

        .title {
            line-height: .76rem;
            padding: 0 .2rem;
            color: #999;
            background-color: #f4f4f4;

            &.mt {
                margin-top: -.15rem;
            }
        }

        .swiper {
            height: 4rem;

            .el-image {
                width: 100%;
                height: 100%;
            }
        }

        .textColor {
            /deep/ .vux-cell-value {
                color: #000;
            }
        }

        .appointment {
            div {
                margin-left: .8rem;
                text-align: left;

                &:nth-child(1) {
                    margin-bottom: .3rem;
                    color: #222;
                }

                &:nth-child(3) {
                    margin-top: .2rem;
                    color: #222;
                }
            }
        }

        /deep/ .form {
            border-top: 1px solid #eee;

            .el-form-item {
                position: relative;
                font-size: .28rem;
                background-color: #fff;
                margin-bottom: .15rem;
                padding: .1rem 0;

                .vux-cell-box {
                    position: absolute;
                    right: 0;
                    top: -.75rem;
                    width: 100%;
                }

                .el-form-item__label {
                    color: #333;
                    padding: 0 0 0 .3rem;
                    font-size: .28rem;
                    line-height: .48rem;
                    margin-bottom: .1rem;
                }

                .el-form-item__content {
                    font-size: .28rem;
                    line-height: .48rem;
                    padding: .1rem .3rem;
                }

                .weui-cells_checkbox {
                    .weui-icon-checked {
                        &:before {
                            font-size: .34rem;
                        }
                    }

                    .weui-check:checked + .vux-checklist-icon-checked {
                        &:before {
                            color: #409EFF;
                        }
                    }
                }

                .el-button {
                    font-size: .28rem;
                }

                .form-group {
                    .weui-cells {
                        &:before, &:after {
                            border: 0 none;
                        }

                        margin-top: 0;
                        font-size: .28rem;

                        .weui-cell {
                            padding: .15rem .2rem;

                            &:before {
                                border: 0 none;
                            }
                        }

                        .vux-cell-value {
                            color: inherit;
                        }
                    }
                }

                &.form-item-top {
                    margin-top: -.2rem;
                    border-top: 1px solid #eee;
                }

                .vux-checker-box {
                    .ckecker-item {
                        width: 1.6rem;
                        /*background-color: #eee;*/
                        margin-right: .6rem;
                        height: .8rem;
                        line-height: .8rem;
                        text-align: center;
                        border-radius: .03rem;

                        .el-image {
                            width: 100%;
                            height: 100%;
                        }

                        &:hover, &:active {
                            background-color: transparent;
                        }
                    }
                }

                &.degree {
                    .el-form-item__label {
                        margin-bottom: 0;
                        float: left;
                        /*line-height: .48rem;*/
                        padding: .1rem .3rem;
                    }

                    .el-form-item__content {
                        height: .68rem;
                        text-align: right;

                        .placeholder {
                            color: #999;
                        }
                    }
                }
            }
        }

        .submit {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: .88rem;
            border-radius: 0;
            z-index: 5;
        }
    }

</style>
